<template>
    <div>
        <a-card class="top-card">
            <div class="user-top">
                <div class="top-title">
                    <IconUser />标签管理
                </div>
                <div class="top-actions">
                    <a-button shape="round" @click="refreshTagList">
                        <template #icon>
                            <icon-refresh />
                        </template>
                    </a-button>
                    <a-button type="primary" shape="round">
                        <template #icon>
                            <icon-plus @click="addTagV" />
                        </template>
                    </a-button>
                </div>
            </div>
        </a-card>
        <a-card v-if="resListloading" class="spin-row">
            <a-spin tip="标签列表加载中..." />
        </a-card>
        <a-list v-else class="user-list">
            <a-list-item v-for="(i, k) in resList" :key="k">
                <a-list-item-meta>
                    <template #title>
                        <div class="user-name-id">
                            <div class="name">{{ i.tagName }}</div>
                            <div class="id">
                            </div>
                        </div>
                    </template>
                    <template #description>
                        <div class="user-des">
                            {{ i.tagDescription }}
                        </div>
                    </template>
                </a-list-item-meta>
                <template #actions>
                    <icon-edit @click="edit(k)" />
                    <a-popconfirm @ok="del(i.tagId)" position="tr" content="是否确认删除该标签?"><icon-delete /></a-popconfirm>

                </template>
            </a-list-item>
        </a-list>
        <div class="footer-page">
            <a-pagination :current="currentPage" :total="total" :page-size="pageSize" show-total
                @change="handlePageChange" />
        </div>
    </div>
    <a-modal v-model:visible="detailVisible" simple :footer="null">
        <template #title>
            修改标签
        </template>
        <div>
            <a-form :model="editForm" @submit="handleSubmit">
                <a-form-item field="tagId" label="标签ID" tooltip="标签ID不可修改">
                    <a-input v-model="editForm.tagId" disabled />
                </a-form-item>
                <a-form-item field="tagName" label="标签名">
                    <a-input v-model="editForm.tagName" placeholder="标签名" />
                </a-form-item>
                <a-form-item field="tagDescription" label="标签描述">
                    <a-input v-model="editForm.tagDescription" placeholder="标签描述" />
                </a-form-item>
                <a-form-item field="createTime" label="注册日期">
                    <div class="form-createTime">{{ handleCreateTime(editForm.createTime) }}</div>
                </a-form-item>
                <a-form-item class="edit-btn">
                    <div class="btns">
                        <div class="btn"><a-button type="primary" html-type="submit">提交</a-button></div>
                        <div class="btn"><a-button @click="cancelEdit">取消</a-button></div>
                    </div>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
    <a-modal v-model:visible="addVisible" simple :footer="null">
        <template #title>
            新增标签
        </template>
        <div>
            <a-form :model="addForm" @submit="handleAddSubmit">
                <a-form-item field="tagName" label="标签名">
                    <a-input v-model="addForm.title" placeholder="标签名" />
                </a-form-item>
                <a-form-item field="tagDescription" label="标签描述">
                    <a-input v-model="addForm.password" placeholder="标签描述" />
                </a-form-item>
                <a-form-item class="edit-btn">
                    <div class="btns">
                        <div class="btn"><a-button type="primary" html-type="submit">提交</a-button></div>
                        <div class="btn"><a-button @click="cancelEdit">取消</a-button></div>
                    </div>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>
<script>
import { getAllTags,deleteTag,addTag, updateTag } from "@/api/adminTagApi"
import { computed, reactive, ref } from 'vue';
import {
    IconCaretRight,
    IconCaretLeft,
    IconIdcard,
    IconMessage,
    IconUser,
    IconUserGroup,
    IconBook,
    IconApps,
    IconEdit,
    IconDelete,
    IconPlus,
    IconRefresh,
} from '@arco-design/web-vue/es/icon';
import { Message } from '@arco-design/web-vue';
import TimeUtils from '@/utils/timeUtils'
export default {
    components: {
        IconCaretRight,
        IconCaretLeft,
        IconIdcard,
        IconMessage,
        IconUser,
        IconUserGroup,
        IconBook,
        IconApps,
        IconEdit,
        IconDelete,
        IconPlus,
        IconRefresh,
    },
    methods: {
        handleCreateTime(time) {
            return TimeUtils.formatTime(time)
        },
    },
    created() {
    },
    setup() {
        const addVisible = ref(false);
        const currentIndex = ref(0);
        const resList = ref([]);
        const pageTagList = computed(() => {
            return resList.value?.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value);
        });
        const resListloading = ref(false);
        const switchLoading = ref(false);
        const pageSize = ref(10);
        const currentPage = ref(1);
        const editForm = ref({});
        const addForm = reactive({});
        const detailVisible = ref(false);
        const v = {
            pageSize: pageSize.value,
            pageNum: 1,
        }
        const total = ref(0);
        const addTagV = ()=>{
            addVisible.value = true;
        }
        const handlePageChange = async (page) => {
            currentPage.value = page;
            v.pageNum = page;
            const res = await getAllTags(v);
            resList.value = res.data.data.list;
            total.value = res.data.data.total;
        };
        const addNewTag = () => {
            addVisible.value = true;

        };
        const cancelEdit = () => {
            detailVisible.value = false;
            addVisible.value = false;
        };
        const handleSubmit = async ({ values, errors })=>{
            console.log(values);
            detailVisible.value = false;
            const res = await updateTag(values);
            if (res.data.code === 100) {
                Message.success('修改成功');
                refreshTagList();
            } else {
                Message.error('修改失败');
            }

        }
        const handleAddSubmit = ({ values, errors }) => {
            console.log(values);
            addVisible.value = false;
        };
        const refreshTagList = async () => {
            resListloading.value = true;
            const res = await getAllTags(v);
            resList.value = res.data.data.list;
            total.value = res.data.data.total;
            resListloading.value = false;
        };
        const getTagList = async () => {
            resListloading.value = true;
            const res = await getAllTags(v);
            resList.value = res.data.data.list;
            total.value = res.data.data.total;
            resListloading.value = false;
        };
        const edit = (index) => {
            currentIndex.value = index;
            editForm.value = resList.value[index];
            detailVisible.value = true;
        };
        const del = (tid) => {
            console.log(tid);
            deleteTag(tid).then(res => {
                if (res.data.code === 100) {
                    Message.success('删除成功');
                    refreshTagList();
                } else {
                    Message.error('删除失败');
                }
            });
        };
        getTagList();

        return {
            currentIndex,
            resList,
            pageTagList,
            resListloading,
            switchLoading,
            pageSize,
            currentPage,
            editForm,
            addForm,
            detailVisible,
            addVisible,
            total,
            cancelEdit,
            handleAddSubmit,
            refreshTagList,
            getTagList,
            addNewTag,
            edit,
            del,
            handlePageChange,
            handleSubmit,
            addTagV
        };
    }
}
</script>
<style lang="less">
.img-icon {
    img {
        width: 48px;
    }

    .other {
        width: 48px;
    }
}

.userForm-item {
    display: flex;
    align-items: center;
    gap: .5rem;

    .userName {
        font-size: 16px;
    }

    .userId {
        font-size: 12px;
        color: var(--color-neutral-6);
    }
}

.status-tag {
    margin-left: .5rem;
}

.form-createTime {
    color: var(--color-neutral-6);
}

.spin-row {
    display: flex;
    margin: 1rem;
    justify-content: center;
}

.top-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.footer-page {
    display: flex;
    justify-content: flex-end;
    margin: 1rem;
}

.edit-btn {
    .btns {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        width: 100%;

        .btn {
            display: flex;
            justify-content: flex-end;
        }
    }

}

.user-name-id {
    display: flex;
    align-items: center;
    gap: 8px;

    .name {
        font-size: 1rem;
    }

    .id {
        font-size: 13px;
        color: #999;
    }

    .tags {
        display: flex;
        gap: 5px;

        .tag {
            font-size: 12px;
            color: #999;
        }
    }
}

.user-des {
    margin-right: 2rem;
    font-size: 12px;
    color: #999;
}

.top-card {
    margin: 1rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.user-list {
    margin: 1rem;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.user-top {
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-title {
        display: flex;
        align-items: flex-end;
        gap: 5px;
        margin-left: 1rem;
        font-size: 1.5rem;
    }
}
</style>